import React from 'react'
import { IMenuItem } from '@/types/menu'
import styles from './index.module.less'
import { CloseOutlined } from '@ant-design/icons'
import { useLocation, useNavigate } from 'react-router-dom'
import classNames from 'classnames'

export interface ITagItem extends Partial<IMenuItem> {
  index: number
  onClose?: (item: ITagItem, index: number) => void
}

const TagItem: React.FC<ITagItem> = props => {
  const naviagate = useNavigate()
  const { pathname } = useLocation()

  const handleClick = () => {
    naviagate(props.path || '/403')
  }

  return (
    <div className={classNames(styles.tagItem, { [styles.active]: pathname === props.path })} onClick={handleClick}>
      {props.menuName}
      <CloseOutlined
        className={styles.close}
        onClick={e => {
          props.onClose && props.onClose(props, props.index)
          e.stopPropagation()
        }}
      />
    </div>
  )
}

export default TagItem
